<html>
    <head>
        <style>
            div.cor{
                width:30px;
                height:30px;  
                float:left;
                margin:4px;
            }
            div.borda{
                
                width:38px;
                height:38px;  
                float:left;
                border: medium solid rgb(255, 255, 255);
            }
            h1{
                font-family:Arial,Helvetica,sans-serif;
                color: rgb(82, 105, 126);
            }
            span.texto{
                font:14px/18px "Segoe UI","Segoe WP","Segoe UI Regular","Helvetica Neue",Helvetica,Tahoma,Arial Unicode MS,sans-serif;
                font-weight: bold;
                color: rgb(58, 58, 58);
            }
        </style>

        <script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
        <script type="text/javascript">
            function criarPaletaDeCores(){
                var inc= 32;
                var ini=64;
                var id=0;
                for(var i=ini; i< 256; i=i+inc){
                    var cort=i*65536;
                    var cor=cort.toString(16);

                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#"+cor+"; \"> <\div>")
                    id=id+1;
                }
                        
                for(var i=ini; i< 256; i=i+inc){
                    var cort=i*256;
                    var cor=cort.toString(16);
                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#00"+cor+"; \"> <\div>")
                    id=id+1;
                }
            
                for(var i=ini; i< 256; i=i+inc){
                    var cor=i.toString(16);
                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#0000"+cor+"; \"> <\div> <\div>")
                    id=id+1;
                }
                for(var i=ini; i< 256; i=i+inc){
                    var cort=(i*256)|(i*65536);                
                    var cor=cort.toString(16);
                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#"+cor+"; \"> <\div>")
                    id=id+1;
                }
                for(var i=ini; i< 256; i=i+inc){
                    var cort=(i*256)|i;                
                    var cor=cort.toString(16);
                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#00"+cor+"; \"> <\div>")
                    id=id+1;
                }
                for(var i=ini; i< 256; i=i+inc){
                    var cort=(i)|(i*65536);                
                    var cor=cort.toString(16);
                    $("#selecaoCor").append("<div class=\"borda\" id=\"borda"+id+"\"> <div id=\"cor"+id+"\" class=\"cor\" style=\" background-color:#"+cor+"; \"> <\div>")
                    id=id+1;
                }
            }
            
            $(document).ready(function (){
                var elementoSelecionado=0;
                var idElementoSelecionado="";
                criarPaletaDeCores();
                $(".cor").click(function (){
                    var corValor=$(this).css("background-color");
                    $("#corMouse").attr("value",  corValor);
                    if(elementoSelecionado==1){
                        $("#borda"+idElementoSelecionado).css("border","medium solid rgb(255, 255, 255)");
                    }
                    idElementoSelecionado=$(this).attr("id").substr(3);
                    $("#borda"+idElementoSelecionado).css("border","medium solid rgb(0, 0, 255)");
                    elementoSelecionado=1;
                });
            });
        </script>
    </head>
    <body>
            <h1><center> PointRevPdf</center></h1>
        <table>
            <tr><td><span class="texto"> Escolha a cor que o cursor do seu mouse tera para os outros participantes:</span> </tr></td>
            <tr><td> <div  id="selecaoCor" style=" min-width:50px; max-width:600px;"> </div></tr></td>           
            <tr><td>            
                <form action="pointrevipdf.php" method="get">
                    <input type=hidden name="corMouse" id="corMouse" value="#000000"></input>   <br/>
                    <input type="submit" name="entrar" value="Entrar no chat"> </input>
                </form>
            </tr></td>
        </table>
    </body>
</html>